define(function(require, exports, module) {
    "use strict";
    var $ = require("$"),
        app = require("dist/application/app"),
        config = app.config;
    require("event_drag");
    require("row_sizing")
    var $js_sys_templet = $("select.js_sys_templet");
    if ($js_sys_templet.length > 0) {
        $("select.js_sys_templet").on("change", function() {
            var path = $(this).val();
            config.msg.msgbox.confirm(config.lang.confirmChangetemplet, function(r) {
                r && config.msg.redirect(path)
            })
        });


        var $container = $(".js_container");
        var zIndex = 1;
        var $background = $("#background");
        var $width = $("#width");
        var $height = $("#height");

        var item_tmp = require("./template/item.html");
        $(".js_print_item").on("click", function() {
            var $this = $(this),
                val = $this.val(),
                id = $this.attr("id");
            var checked = $this.prop('checked');
            var $item = $("#" + "item_{0}".format(id));
            if (checked) {
                if ($item.length == 0) {
                    var item_html = $(item_tmp.format($this.data("text"), id));
                    item_html.attr("id", "item_{0}".format(id))
                    bind(item_html.appendTo($container));
                }
            } else {
                $item.remove();
            }

        });
        var bind = function($item) {
            $item.drag("start", function(ev, dd) {
                var $this = $(this);
                dd.width = $this.width();
                dd.height = $this.height();
                dd.limit = {
                    right: $container.innerWidth() - $this.outerWidth(),
                    bottom: $container.innerHeight() - $this.outerHeight()
                };
                dd.isResize = $(ev.target).hasClass("resize");
            }).drag(function(ev, dd) {
                var $this = $(this);
                if (dd.isResize) {
                    $this.css({
                        width: Math.max(20, Math.min(dd.width + dd.deltaX, $container.innerWidth() - $this.position().left) - 2),
                        height: Math.max(20, Math.min(dd.height + dd.deltaY, $container.innerHeight() - $this.position().top) - 2)
                    }).find("textarea").blur();
                } else {
                    $this.css({
                        top: Math.min(dd.limit.bottom, Math.max(0, dd.offsetY)),
                        left: Math.min(dd.limit.right, Math.max(0, dd.offsetX))
                    });
                }
            }, {
                relative: true
            }).mousedown(function() {
                $(this).css("z-index", zIndex++);
            }).click(function() {
                var $this = $(this);
                $container.find("div.item").not($this).removeClass("selected");
                $this.toggleClass("selected");
            })
            // .dblclick(function() {
            //     var $this = $(this);
            //     if ($this.find("textarea").size() == 0) {
            //         var $pre = $this.find("pre");
            //         var value = $pre.hide().text($pre.html()).html();
            //         $('<textarea>' + value + '<\/textarea>').replaceAll($pre).width($this.innerWidth() - 6).height($this.innerHeight() - 6).blur(function() {
            //             var $this = $(this);
            //             $this.replaceWith('<pre>' + $this.val() + '<\/pre>');
            //         }).focus();
            //     }
            // });
        }
        var items = $('.item', $container);
        items.length > 0 && (function() {
            $.each(items, function(index, val) {
                bind($(this));
            });
        })()
        $('[data-toggle="selectimg"]').bind('insert', function(event, path) {
            // $container.css({
            //     background: "url(" + path + ") 0px 0px no-repeat"
            // });
            $(".jsimg").attr("src", path).show();
        });
        $background.on("change", function() {
            $container.css({
                background: "url(" + $background.val() + ") 0px 0px no-repeat"
            });
        });
        var initImageSizeAnim = function() {
           var newHeight =  parseFloat($height.val()) / parseFloat($width.val()) * 766;
            if (newHeight < 76 || newHeight > 7660) {
                config.msg.info("宽高比应为 0.1 ～ 10 之间")
                return false
            }
            $(".jsimg").height(newHeight)
            return true;
           
        }

        $width.add($height).on("change", function() {
            initImageSizeAnim()
        })


        $(document).on("click", "div.js_container .close", function() {
            var $item = $(this).closest('.item');
            $item.remove();
            $("#" + $item.data("id")).prop('checked', false);
        })

        $('form button[type="submit"]').on("click", function() {
            
            if ($("input.js_print_item:checked").length == 0) {
                config.msg.info("打印项未勾选或位置设置不正确！")
                return false;
            };
           
            var rhtml = $("<div>{0}</div>".format($container.html()));
            $(".close", rhtml).remove();
            var $items = $("div.item", rhtml);
            $.each($items, function(index, item) {
                var $item = $(item)
                $("pre", $item).text($("#" + $item.data("id")).data("value"))
            });
            rhtml.find(".close").remove();
            $("#content").val(rhtml.html().trim())
            return initImageSizeAnim()

        })


    };


})
